<template>
  <!-- 新闻详情页面主容器 -->
  <div class="news-detail">
    <!-- 返回按钮区域 - 点击返回新闻列表页面 -->
    <div class="back-button" @click="goBack">
      <!-- 返回箭头图标 - SVG矢量图标 -->
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <!-- 返回按钮文字 -->
      <span>返回新闻列表</span>
    </div>

    <!-- 文章内容主容器 - 条件渲染，仅在有文章数据时显示 -->
    <div class="article-container" v-if="article">
      <!-- 文章头部信息区域 -->
      <div class="article-header">
        <!-- 文章元信息 - 分类和日期 -->
        <div class="article-meta">
          <!-- 文章分类标签 - 显示分类名称 -->
          <span class="article-category">{{ getCategoryName(article.category) }}</span>
          <!-- 文章发布日期 -->
          <span class="article-date">{{ article.date }}</span>
        </div>
        <!-- 文章标题 - 主标题显示 -->
        <h1 class="article-title">{{ article.title }}</h1>
        <!-- 文章标签列表 -->
        <div class="article-tags">
          <!-- 循环渲染每个标签 -->
          <span 
            v-for="tag in article.tags" 
            :key="tag"
            class="tag"
          >
            {{ tag }}
          </span>
        </div>
      </div>

      <!-- 文章主图片展示区域 -->
      <div class="article-image">
        <!-- 文章配图 - 动态绑定图片源和alt属性 -->
        <img :src="article.image" :alt="article.title" />
      </div>

      <!-- 文章正文内容区域 -->
      <div class="article-content">
        <!-- 内容区块 - 活动概述部分 -->
        <div class="content-section">
          <!-- 区块标题 -->
          <h2>活动概述</h2>
          <!-- 文章摘要内容 -->
          <p>{{ article.summary }}</p>
          <!-- 条件渲染 - 活动类型文章的特定内容 -->
          <p v-if="article.category === 'events'">
            亲爱的舰长们，全新活动现已开启！在这个充满挑战与机遇的活动中，舰长们将体验到前所未有的战斗乐趣。
            活动期间，舰长们可以通过完成各种任务来获得丰厚的奖励，包括但不限于水晶、升级材料、限定装备等珍贵物品。
          </p>
          <!-- 条件渲染 - 更新类型文章的特定内容 -->
          <p v-else-if="article.category === 'updates'">
            本次更新为舰长们带来了全新的游戏内容和优化体验。我们持续致力于为舰长们提供更加精彩的游戏世界，
            每一次更新都凝聚着开发团队的心血与努力。希望舰长们能够在新版本中找到属于自己的乐趣。
          </p>
          <!-- 条件渲染 - 公告类型文章的特定内容 -->
          <p v-else-if="article.category === 'announcements'">
            为了给舰长们提供更好的游戏体验，我们将按照以下安排进行相关调整。请舰长们注意相关时间节点，
            合理安排游戏时间。如有任何疑问，请及时联系客服团队，我们将竭诚为您服务。
          </p>
          <!-- 条件渲染 - 其他类型文章的默认内容 -->
          <p v-else>
            《崩坏3》作为一款深受玩家喜爱的动作游戏，始终致力于为舰长们带来最优质的游戏体验。
            我们将持续关注玩家反馈，不断优化游戏内容，为大家呈现更加精彩的崩坏世界。
          </p>
        </div>

        <!-- 内容区块 - 活动时间信息（仅活动类型文章显示） -->
        <div class="content-section" v-if="article.category === 'events'">
          <!-- 活动时间区块标题 -->
          <h2>活动时间</h2>
          <!-- 时间信息容器 -->
          <div class="time-info">
            <!-- 活动开始时间项 -->
            <div class="time-item">
              <!-- 时间标签 -->
              <span class="time-label">活动开始：</span>
              <!-- 时间值 - 动态计算活动开始时间 -->
              <span class="time-value">{{ getEventStartTime(article.date) }}</span>
            </div>
            <!-- 活动结束时间项 -->
            <div class="time-item">
              <!-- 时间标签 -->
              <span class="time-label">活动结束：</span>
              <!-- 时间值 - 动态计算活动结束时间 -->
              <span class="time-value">{{ getEventEndTime(article.date) }}</span>
            </div>
          </div>
        </div>

        <!-- 内容区块 - 特性/内容列表 -->
        <div class="content-section">
          <!-- 动态标题 - 根据文章类型显示不同标题 -->
          <h2>{{ getContentTitle(article.category) }}</h2>
          <!-- 特性列表容器 -->
          <div class="feature-list">
            <!-- 循环渲染特性项 - 根据文章类型获取不同特性 -->
            <div class="feature-item" v-for="(feature, index) in getFeatures(article.category)" :key="index">
              <!-- 特性序号图标 -->
              <div class="feature-icon">{{ index + 1 }}</div>
              <!-- 特性描述文本 -->
              <div class="feature-text">{{ feature }}</div>
            </div>
          </div>
        </div>

        <!-- 内容区块 - 奖励预览（仅活动类型文章显示） -->
        <div class="content-section" v-if="article.category === 'events'">
          <!-- 奖励区块标题 -->
          <h2>奖励预览</h2>
          <!-- 奖励网格容器 -->
          <div class="rewards-grid">
            <!-- 循环渲染奖励项 -->
            <div class="reward-item" v-for="(reward, index) in getRewards()" :key="index">
              <!-- 奖励图标 -->
              <div class="reward-icon">🎁</div>
              <!-- 奖励名称 -->
              <div class="reward-name">{{ reward.name }}</div>
              <!-- 奖励描述 -->
              <div class="reward-desc">{{ reward.desc }}</div>
            </div>
          </div>
        </div>

        <!-- 内容区块 - 注意事项 -->
        <div class="content-section">
          <!-- 注意事项区块标题 -->
          <h2>注意事项</h2>
          <!-- 注意事项列表 -->
          <ul class="notice-list">
            <!-- 循环渲染注意事项 - 根据文章类型获取不同注意事项 -->
            <li v-for="(notice, index) in getNotices(article.category)" :key="index">
              {{ notice }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 相关推荐区域 -->
      <div class="related-news">
        <!-- 相关推荐标题 -->
        <h3>相关推荐</h3>
        <!-- 相关文章列表容器 -->
        <div class="related-list">
          <!-- 循环渲染相关文章 - 点击可查看详情 -->
          <div 
            v-for="related in relatedArticles" 
            :key="related.id"
            class="related-item"
            @click="viewRelated(related)"
          >
            <!-- 相关文章缩略图 -->
            <img :src="related.image" :alt="related.title" />
            <!-- 相关文章信息 -->
            <div class="related-info">
              <!-- 相关文章标题 -->
              <h4>{{ related.title }}</h4>
              <!-- 相关文章摘要 -->
              <p>{{ related.summary }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 新闻详情页面组件
export default {
  // 组件名称
  name: 'NewsDetail',
  // 组件属性定义
  props: {
    // 当前文章对象 - 必需属性
    article: {
      type: Object, // 属性类型：对象
      required: true // 是否必需：是
    },
    // 所有文章列表 - 用于生成相关推荐
    allArticles: {
      type: Array, // 属性类型：数组
      default: () => [] // 默认值：空数组
    }
  },
  // 组件数据
  data() {
    return {
      // 新闻分类配置 - 用于分类名称映射
      newsCategories: [
        { key: 'latest', name: '最新' }, // 最新分类
        { key: 'updates', name: '动态' }, // 动态分类
        { key: 'announcements', name: '公告' }, // 公告分类
        { key: 'events', name: '活动' }, // 活动分类
        { key: 'news', name: '资讯' } // 资讯分类
      ]
    }
  },
  // 计算属性
  computed: {
    // 相关文章列表 - 同分类且非当前文章的前3篇
    relatedArticles() {
      return this.allArticles
        .filter(item => item.id !== this.article.id && item.category === this.article.category) // 过滤：同分类且非当前文章
        .slice(0, 3) // 取前3篇
    }
  },
  // 组件方法
  methods: {
    // 返回上一页方法 - 触发父组件的go-back事件
    goBack() {
      this.$emit('go-back') // 向父组件发送返回事件
    },
    // 获取分类名称 - 根据分类key获取对应的中文名称
    getCategoryName(categoryKey) {
      const category = this.newsCategories.find(cat => cat.key === categoryKey) // 查找对应分类
      return category ? category.name : categoryKey // 返回分类名称或原key
    },
    // 获取活动开始时间 - 在原日期基础上添加具体时间
    getEventStartTime(date) {
      return date + ' 10:00' // 活动开始时间固定为10:00
    },
    // 获取活动结束时间 - 在原日期基础上加14天并设置结束时间
    getEventEndTime(date) {
      const endDate = new Date(date) // 创建日期对象
      endDate.setDate(endDate.getDate() + 14) // 加14天
      return endDate.toISOString().split('T')[0].replace(/-/g, '/') + ' 23:59' // 格式化并添加结束时间
    },
    // 获取内容标题 - 根据文章类型返回对应的区块标题
    getContentTitle(category) {
      const titles = {
        events: '活动内容', // 活动类型标题
        updates: '更新内容', // 更新类型标题
        announcements: '公告详情', // 公告类型标题
        news: '资讯详情', // 资讯类型标题
        latest: '详细信息' // 最新类型标题
      }
      return titles[category] || '详细信息' // 返回对应标题或默认标题
    },
    // 获取特性列表 - 根据文章类型返回对应的特性描述
    getFeatures(category) {
      const features = {
        // 活动类型特性
        events: [
          '参与活动可获得大量水晶奖励', // 活动奖励特性
          '完成指定任务解锁限定装备', // 装备解锁特性
          '活动期间经验值获取翻倍', // 经验加成特性
          '特殊关卡开放，挑战更高难度' // 关卡挑战特性
        ],
        // 更新类型特性
        updates: [
          '全新角色技能机制优化', // 技能优化特性
          '游戏界面视觉效果提升', // 界面提升特性
          '战斗系统平衡性调整', // 平衡调整特性
          '新增多项便民功能' // 功能新增特性
        ],
        // 公告类型特性
        announcements: [
          '服务时间调整安排', // 时间调整特性
          '补偿方案详细说明', // 补偿方案特性
          '后续优化计划预告', // 优化计划特性
          '玩家反馈处理机制' // 反馈处理特性
        ],
        // 资讯类型特性
        news: [
          '游戏发展里程碑回顾', // 发展回顾特性
          '开发团队幕后故事', // 幕后故事特性
          '社区活动精彩瞬间', // 社区活动特性
          '未来内容规划展望' // 规划展望特性
        ]
      }
      return features[category] || features.news // 返回对应特性或默认资讯特性
    },
    // 获取奖励列表 - 返回活动奖励信息
    getRewards() {
      return [
        { name: '水晶 ×500', desc: '完成主要任务获得' }, // 水晶奖励
        { name: '限定装备', desc: '活动专属奖励' }, // 装备奖励
        { name: '升级材料', desc: '角色培养必需品' }, // 材料奖励
        { name: '特殊称号', desc: '彰显荣誉身份' } // 称号奖励
      ]
    },
    // 获取注意事项列表 - 根据文章类型返回对应的注意事项
    getNotices(category) {
      const notices = {
        // 活动类型注意事项
        events: [
          '活动期间请确保网络连接稳定', // 网络连接要求
          '奖励将在活动结束后统一发放', // 奖励发放说明
          '每日任务重置时间为凌晨4点', // 任务重置时间
          '如遇问题请及时联系客服' // 问题处理说明
        ],
        // 更新类型注意事项
        updates: [
          '更新前请确保设备存储空间充足', // 存储空间要求
          '建议在WiFi环境下进行更新', // 网络环境建议
          '更新过程中请勿关闭游戏', // 更新过程注意
          '如遇异常请重启游戏尝试' // 异常处理方法
        ],
        // 公告类型注意事项
        announcements: [
          '请舰长们关注官方公告时间', // 时间关注提醒
          '相关调整将按时生效', // 调整生效说明
          '如有疑问请查看FAQ或联系客服', // 疑问处理方式
          '感谢舰长们的理解与支持' // 感谢支持
        ],
        // 资讯类型注意事项
        news: [
          '内容仅供参考，以游戏内实际为准', // 内容参考说明
          '相关信息可能会根据情况调整', // 信息调整说明
          '更多详情请关注官方渠道', // 详情获取渠道
          '欢迎舰长们积极参与讨论' // 参与讨论邀请
        ]
      }
      return notices[category] || notices.news // 返回对应注意事项或默认资讯注意事项
    },
    // 查看相关文章 - 触发父组件的view-article事件
    viewRelated(article) {
      this.$emit('view-article', article) // 向父组件发送查看文章事件
    }
  }
}
</script>

/* 新闻详情页面样式 */
<style scoped>
/* 新闻详情主容器 */
.news-detail {
  min-height: 100vh; /* 最小高度：全屏高度 */
  background: transparent; /* 背景：透明 */
  padding: 20px; /* 内边距：20px */
}

/* 返回按钮样式 */
.back-button {
  display: flex; /* 布局：弹性布局 */
  align-items: center; /* 对齐：垂直居中 */
  gap: 8px; /* 间距：8px */
  color: rgba(255, 255, 255, 0.8); /* 颜色：半透明白色 */
  cursor: pointer; /* 光标：手型 */
  margin-bottom: 30px; /* 下边距：30px */
  padding: 10px 15px; /* 内边距：上下10px 左右15px */
  border-radius: 20px; /* 圆角：20px */
  background: rgba(255, 255, 255, 0.1); /* 背景：半透明白色 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框：半透明白色边框 */
  width: fit-content; /* 宽度：适应内容 */
  transition: all 0.3s ease; /* 过渡：所有属性0.3秒缓动 */
}

/* 返回按钮悬停状态 */
.back-button:hover {
  color: #fff; /* 悬停颜色：纯白色 */
  background: rgba(255, 255, 255, 0.2); /* 悬停背景：更亮的半透明白色 */
  border-color: rgba(255, 255, 255, 0.3); /* 悬停边框：更亮的半透明白色 */
}

/* 文章主容器 */
.article-container {
  max-width: 800px; /* 最大宽度：800px */
  margin: 0 auto; /* 外边距：水平居中 */
  background: rgba(255, 255, 255, 0.05); /* 背景：半透明白色 */
  border-radius: 20px; /* 圆角：20px */
  overflow: hidden; /* 溢出：隐藏 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 边框：半透明白色边框 */
}

/* 文章头部区域 */
.article-header {
  padding: 30px; /* 内边距：30px */
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1)); /* 背景：渐变色 */
  border-bottom: 1px solid rgba(9, 9, 9, 0.1); /* 下边框：半透明白色 */
}

/* 文章元信息容器 */
.article-meta {
  display: flex; /* 布局：弹性布局 */
  justify-content: space-between; /* 对齐：两端对齐 */
  align-items: center; /* 对齐：垂直居中 */
  margin-bottom: 20px; /* 下边距：20px */
}

/* 文章分类标签 */
.article-category {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4); /* 背景：渐变色 */
  color: #fff; /* 颜色：白色 */
  padding: 6px 16px; /* 内边距：上下6px 左右16px */
  border-radius: 15px; /* 圆角：15px */
  font-size: 14px; /* 字体大小：14px */
  font-weight: 500; /* 字体粗细：中等 */
}

/* 文章发布日期 */
.article-date {
  color: rgba(255, 255, 255, 0.7); /* 颜色：半透明白色 */
  font-size: 14px; /* 字体大小：14px */
}

/* 文章标题 */
.article-title {
  color: #fff; /* 颜色：白色 */
  font-size: 28px; /* 字体大小：28px */
  font-weight: 700; /* 字体粗细：粗体 */
  line-height: 1.3; /* 行高：1.3倍 */
  margin-bottom: 20px; /* 下边距：20px */
}

/* 文章标签容器 */
.article-tags {
  display: flex; /* 布局：弹性布局 */
  flex-wrap: wrap; /* 换行：允许换行 */
  gap: 10px; /* 间距：10px */
}

/* 文章标签样式 */
.tag {
  background: rgba(255, 255, 255, 0.15); /* 背景：半透明白色 */
  color: rgba(255, 255, 255, 0.9); /* 颜色：半透明白色 */
  padding: 6px 12px; /* 内边距：上下6px 左右12px */
  border-radius: 12px; /* 圆角：12px */
  font-size: 13px; /* 字体大小：13px */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框：半透明白色边框 */
}

/* 文章图片容器 */
.article-image {
  width: 100%; /* 宽度：100% */
  height: 300px; /* 高度：300px */
  overflow: hidden; /* 溢出：隐藏 */
}

/* 文章图片 */
.article-image img {
  width: 100%; /* 宽度：100% */
  height: 100%; /* 高度：100% */
  object-fit: cover; /* 对象适应：覆盖 */
}

/* 文章内容区域 */
.article-content {
  padding: 30px; /* 内边距：30px */
}

/* 内容区块 */
.content-section {
  margin-bottom: 30px; /* 下边距：30px */
}

/* 内容区块标题 */
.content-section h2 {
  color: #fff; /* 颜色：白色 */
  font-size: 20px; /* 字体大小：20px */
  font-weight: 600; /* 字体粗细：半粗体 */
  margin-bottom: 15px; /* 下边距：15px */
  padding-bottom: 8px; /* 下内边距：8px */
  border-bottom: 2px solid rgba(255, 107, 107, 0.3); /* 下边框：半透明红色 */
}

/* 内容区块段落 */
.content-section p {
  color: rgba(255, 255, 255, 0.8); /* 颜色：半透明白色 */
  line-height: 1.8; /* 行高：1.8倍 */
  margin-bottom: 15px; /* 下边距：15px */
  font-size: 15px; /* 字体大小：15px */
}

/* 时间信息容器 */
.time-info {
  display: flex; /* 布局：弹性布局 */
  flex-direction: column; /* 方向：列 */
  gap: 10px; /* 间距：10px */
}

/* 时间项 */
.time-item {
  display: flex; /* 布局：弹性布局 */
  align-items: center; /* 对齐：垂直居中 */
  gap: 10px; /* 间距：10px */
}

/* 时间标签 */
.time-label {
  color: rgba(255, 255, 255, 0.7); /* 颜色：半透明白色 */
  font-weight: 500; /* 字体粗细：中等 */
  min-width: 80px; /* 最小宽度：80px */
}

/* 时间值 */
.time-value {
  color: #fff; /* 颜色：白色 */
  background: rgba(255, 107, 107, 0.2); /* 背景：半透明红色 */
  padding: 5px 12px; /* 内边距：上下5px 左右12px */
  border-radius: 8px; /* 圆角：8px */
  font-weight: 500; /* 字体粗细：中等 */
}

/* 特性列表容器 */
.feature-list {
  display: flex; /* 布局：弹性布局 */
  flex-direction: column; /* 方向：列 */
  gap: 15px; /* 间距：15px */
}

/* 特性项 */
.feature-item {
  display: flex; /* 布局：弹性布局 */
  align-items: flex-start; /* 对齐：顶部对齐 */
  gap: 15px; /* 间距：15px */
  padding: 15px; /* 内边距：15px */
  background: rgba(255, 255, 255, 0.05); /* 背景：半透明白色 */
  border-radius: 12px; /* 圆角：12px */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 边框：半透明白色边框 */
}

/* 特性图标 */
.feature-icon {
  width: 30px; /* 宽度：30px */
  height: 30px; /* 高度：30px */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4); /* 背景：渐变色 */
  color: #fff; /* 颜色：白色 */
  border-radius: 50%; /* 圆角：50%（圆形） */
  display: flex; /* 布局：弹性布局 */
  align-items: center; /* 对齐：垂直居中 */
  justify-content: center; /* 对齐：水平居中 */
  font-weight: 600; /* 字体粗细：半粗体 */
  font-size: 14px; /* 字体大小：14px */
  flex-shrink: 0; /* 收缩：不收缩 */
}

/* 特性文本 */
.feature-text {
  color: rgba(255, 255, 255, 0.9); /* 颜色：半透明白色 */
  line-height: 1.6; /* 行高：1.6倍 */
  font-size: 15px; /* 字体大小：15px */
}

/* 奖励网格容器 */
.rewards-grid {
  display: grid; /* 布局：网格布局 */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 网格列：自适应最小180px */
  gap: 15px; /* 间距：15px */
}

/* 奖励项 */
.reward-item {
  text-align: center; /* 文本对齐：居中 */
  padding: 20px 15px; /* 内边距：上下20px 左右15px */
  background: rgba(255, 255, 255, 0.05); /* 背景：半透明白色 */
  border-radius: 12px; /* 圆角：12px */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 边框：半透明白色边框 */
  transition: all 0.3s ease; /* 过渡：所有属性0.3秒缓动 */
}

/* 奖励项悬停状态 */
.reward-item:hover {
  background: rgba(255, 255, 255, 0.1); /* 悬停背景：更亮的半透明白色 */
  transform: translateY(-2px); /* 悬停变换：向上移动2px */
}

/* 奖励图标 */
.reward-icon {
  font-size: 24px; /* 字体大小：24px */
  margin-bottom: 10px; /* 下边距：10px */
}

/* 奖励名称 */
.reward-name {
  color: #fff; /* 颜色：白色 */
  font-weight: 600; /* 字体粗细：半粗体 */
  margin-bottom: 5px; /* 下边距：5px */
  font-size: 14px; /* 字体大小：14px */
}

/* 奖励描述 */
.reward-desc {
  color: rgba(255, 255, 255, 0.7); /* 颜色：半透明白色 */
  font-size: 12px; /* 字体大小：12px */
}

/* 注意事项列表 */
.notice-list {
  list-style: none; /* 列表样式：无 */
  padding: 0; /* 内边距：0 */
}

/* 注意事项列表项 */
.notice-list li {
  color: rgba(255, 255, 255, 0.8); /* 颜色：半透明白色 */
  padding: 10px 0; /* 内边距：上下10px */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 下边框：半透明白色 */
  position: relative; /* 定位：相对定位 */
  padding-left: 20px; /* 左内边距：20px */
  line-height: 1.6; /* 行高：1.6倍 */
}

/* 注意事项列表项前缀 */
.notice-list li:before {
  content: '•'; /* 内容：圆点 */
  color: #ff6b6b; /* 颜色：红色 */
  position: absolute; /* 定位：绝对定位 */
  left: 0; /* 左边距：0 */
  font-weight: bold; /* 字体粗细：粗体 */
}

/* 注意事项列表最后一项 */
.notice-list li:last-child {
  border-bottom: none; /* 下边框：无 */
}

/* 相关推荐区域 */
.related-news {
  margin-top: 40px; /* 上边距：40px */
  padding: 30px; /* 内边距：30px */
  background: rgba(255, 255, 255, 0.03); /* 背景：半透明白色 */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* 上边框：半透明白色 */
}

/* 相关推荐标题 */
.related-news h3 {
  color: #fff; /* 颜色：白色 */
  font-size: 18px; /* 字体大小：18px */
  margin-bottom: 20px; /* 下边距：20px */
  font-weight: 600; /* 字体粗细：半粗体 */
}

/* 相关推荐列表 */
.related-list {
  display: flex; /* 布局：弹性布局 */
  flex-direction: column; /* 方向：列 */
  gap: 15px; /* 间距：15px */
}

/* 相关推荐项 */
.related-item {
  display: flex; /* 布局：弹性布局 */
  gap: 15px; /* 间距：15px */
  padding: 15px; /* 内边距：15px */
  background: rgba(255, 255, 255, 0.05); /* 背景：半透明白色 */
  border-radius: 12px; /* 圆角：12px */
  cursor: pointer; /* 光标：手型 */
  transition: all 0.3s ease; /* 过渡：所有属性0.3秒缓动 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 边框：半透明白色边框 */
}

/* 相关推荐项悬停状态 */
.related-item:hover {
  background: rgba(255, 255, 255, 0.1); /* 悬停背景：更亮的半透明白色 */
  transform: translateX(5px); /* 悬停变换：向右移动5px */
}

/* 相关推荐项图片 */
.related-item img {
  width: 80px; /* 宽度：80px */
  height: 60px; /* 高度：60px */
  object-fit: cover; /* 对象适应：覆盖 */
  border-radius: 8px; /* 圆角：8px */
  flex-shrink: 0; /* 收缩：不收缩 */
}

/* 相关推荐项信息标题 */
.related-info h4 {
  color: #fff; /* 颜色：白色 */
  font-size: 14px; /* 字体大小：14px */
  margin-bottom: 5px; /* 下边距：5px */
  font-weight: 500; /* 字体粗细：中等 */
  line-height: 1.3; /* 行高：1.3倍 */
}

/* 相关推荐项信息描述 */
.related-info p {
  color: rgba(255, 255, 255, 0.7); /* 颜色：半透明白色 */
  font-size: 12px; /* 字体大小：12px */
  line-height: 1.4; /* 行高：1.4倍 */
  margin: 0; /* 外边距：0 */
  display: -webkit-box; /* 显示：webkit盒子 */
  -webkit-line-clamp: 2; /* webkit行数限制：2行 */
  -webkit-box-orient: vertical; /* webkit盒子方向：垂直 */
  overflow: hidden; /* 溢出：隐藏 */
}

/* 响应式设计 - 移动端适配 */
@media (max-width: 768px) {
  /* 移动端 新闻详情主容器 */
  .news-detail {
    padding: 15px; /* 移动端 内边距：15px */
  }
  
  /* 移动端 文章头部区域 */
  .article-header {
    padding: 20px; /* 移动端 内边距：20px */
  }
  
  /* 移动端 文章标题 */
  .article-title {
    font-size: 24px; /* 移动端 字体大小：24px */
  }
  
  /* 移动端 文章内容区域 */
  .article-content {
    padding: 20px; /* 移动端 内边距：20px */
  }
  
  /* 移动端 奖励网格容器 */
  .rewards-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* 移动端 网格列：自适应最小140px */
  }
  
  /* 移动端 相关推荐区域 */
  .related-news {
    padding: 20px; /* 移动端 内边距：20px */
  }
}
</style>